﻿
<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<html class="no-js" lang="zxx" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>时尚衣橱购物商城</title>
    <meta name="description" content="Default Description">
    <meta name="keywords" content="E-commerce" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- place favicon.ico in the root directory -->
    <link rel="shortcut icon" type="image/x-icon" href="/img/icon/favicon.png">
    <!-- Google Font css -->
    <link href="https://fonts.googleapis.com/css?family=Lily+Script+One" rel="stylesheet"> 

    <!-- mobile menu css -->
    <link rel="stylesheet" href="/css/meanmenu.min.css">
    <!-- animate css -->
    <link rel="stylesheet" href="/css/animate.css">
    <!-- nivo slider css -->
    <link rel="stylesheet" href="/css/nivo-slider.css">
    <!-- owl carousel css -->
    <link rel="stylesheet" href="/css/owl.carousel.min.css">
    <!-- slick css -->
   <link rel="stylesheet" href="/css/slick.css">
    <!-- price slider css -->
    <link rel="stylesheet" href="/css/jquery-ui.min.css">
    <!-- fontawesome css -->
    <link rel="stylesheet" href="/css/font-awesome.min.css">
     <!-- fancybox css -->
    <link rel="stylesheet" href="/css/jquery.fancybox.css">
    <!-- bootstrap css -->
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <!-- default css  -->
    <link rel="stylesheet" href="/css/default.css">
    <!-- style css -->
    <link rel="stylesheet" href="../static/css/style.css">
    <!-- responsive css -->
    <link rel="stylesheet" href="/css/responsive.css">
    <link rel="stylesheet" href="/css/shortcode/header.css">
    <link rel="stylesheet" href="/css/shortcode/service.css">
    <link rel="stylesheet" href="/css/shortcode/product.css">
    <link rel="stylesheet" href="/css/shortcode/slider.css">
    <link rel="stylesheet" href="/css/shortcode/parallax.css">
    <link rel="stylesheet" href="/css/shortcode/login.css">
    <link rel="stylesheet" href="/css/shortcode/subscribe.css">
    <link rel="stylesheet" href="/css/shortcode/footer.css">

    <!-- modernizr js -->
    <script src="/js/vendor/modernizr-2.8.3.min.js"></script>
</head>
  <script>
      window.onload=function (){
          getSort(0);
          // 特色产品
          $.ajax({
              type:"post",
              url:"/getSpecialProducts",
              success:function(specialShopList){
                  console.log(specialShopList);
                  for (var i=0;i<specialShopList.length;i++){
                           var specialShop=specialShopList[i];
                           var productUrl = "/product?c_id=" + specialShop.c_id;
                           var wishListUrl = "/addWishlist?c_id=" + encodeURIComponent(specialShop.c_id) +
                          "&u_id=" + encodeURIComponent(specialShop.u_id) +
                          "&c_price=" + encodeURIComponent(specialShop.c_price) +
                          "&c_picture1=" + encodeURIComponent(specialShop.c_picture1);
                      var divSpecialShop=" <div class=\"col-lg-3 col-sm-6\" style='width: 215px;float: left;margin: 12px'>\n" +
                          "                        <div class=\"single-product\">\n" +
                          "                            <!-- Product Image Start -->\n" +
                          "                            <div class=\"kiosk-product-img\">\n" +
                          "                                <a href=\"" + productUrl + "\">\n" + // 使用动态生成的URL
                          "                                    <img src=\"/clothes/"+specialShop.c_picture1+"\" alt=\"single-product\">\n" +
                          // "                                    <img  src=\"/clothes/"+specialShop.c_picture2+"\" alt=\"single-product\">\n" +
                          "                                </a>\n" +
                          "                            </div>\n" +
                          "                            <!-- Product Image End -->\n" +
                          "                            <!-- Product Content Start -->\n" +
                          "                            <div class=\"kiosk-product-content\">\n" +
                          "                                <p><span class=\"price\">" + specialShop.c_name + "</span></p>\n" +
                          // "                                <h4><a href=\"product.html\">"+specialShop.c_desc+"</a></h4>\n" +
                          "                               <h4><a href=\"" + productUrl + "\">" + specialShop.c_desc + "</a></h4>\n" +
                          "                                <div class=\"kiosk-product-action\">\n" +
                          "                                    <div class=\"kiosk-action-content\">\n" +
                          "                                        <a href=\"" + wishListUrl + "\" data-toggle=\"tooltip\" title=\"添加到收藏\"><i class=\"fa fa-heart\"></i></a>\n" +
                          "                                        <a href=\"" +  productUrl + "\" data-toggle=\"tooltip\" title=\"添加到购物车\"><i class=\"fa fa-shopping-cart\"></i></a>\n" +
                          // "                                        <a href=\"product.html\" data-toggle=\"tooltip\" title=\"商品详情\"><i class=\"fa fa-link\"></i></a>\n" +
                         "                                       <a href=\"" + productUrl + "\" data-toggle=\"tooltip\" title=\"商品详情\"><i class=\"fa fa-link\"></i></a>\n" +
                      "                                    </div>\n" +
                          "                                </div>\n" +
                          "                            </div>";
                      $("#specialShopDiv").append(divSpecialShop);
                  }

              },
              dataType:"json"
          });

          function getSort(sortid){
              $("#commodityDiv").html("");
              $.ajax({
                  type:"post",
                  url:"/getCommodityBySort",
                  data:{sortid:sortid},
                  success:function(CommodityList){
                      console.log(CommodityList);
                      for (var i=0;i<CommodityList.length;i++){
                          var commodityListElement=CommodityList[i];
                          var productUrl = "/product?c_id=" + commodityListElement.c_id;

                          var wishListUrl = "/addWishlist?c_id=" + encodeURIComponent(commodityListElement.c_id) +
                              "&u_id=" + encodeURIComponent(commodityListElement.u_id) +
                              "&c_price=" + encodeURIComponent(commodityListElement.c_price) +
                              "&c_picture1=" + encodeURIComponent(commodityListElement.c_picture1);

                          var divShop="<div class=\"single-product\" style='height: 400px;width: 300px;float: left;margin:38px'>\n" +
                              "                                            <!-- Product Image Start -->\n" +
                              "                                            <div  class=\"kiosk-product-img\">\n" +
                              "                                                <a href=\"" + productUrl + "\">\n" +
                              "                                                   <img style='width: 300px;height: 320px' src=\"/clothes/"+commodityListElement.c_picture1+"\" alt=\"single-product\">\n" +
                              // "                                                    <img class=\"second-img\" src=\"/img/products/2.jpg\" alt=\"single-product\">\n" +
                              "                                                </a>\n" +
                              "                                            </div>\n" +
                              "                                            <!-- Product Image End -->\n" +
                              "                                            <!-- Product Content Start -->\n" +
                              "                                            <div class=\"kiosk-product-content\">  \n" +
                              "                                                <p>￥<span class=\"price\">"+commodityListElement.c_price+"</span></p>             \n" +
                              "                                                <h4><a href=\"product.html\">"+commodityListElement.c_name+"</a></h4>\n" +
                              "                                                <div class=\"kiosk-product-action\">\n" +
                              "                                                    <div class=\"kiosk-action-content\">\n" +
                              "                                                        <a href=\"" + wishListUrl + "\" data-toggle=\"tooltip\" title=\"加入收藏\"><i class=\"fa fa-heart\"></i></a>\n" +
                              "                                                        <a  href=\"" +  productUrl + "\" data-toggle=\"tooltip\" title=\"加入购物车\"><i class=\"fa fa-shopping-cart\"></i></a>\n" +
                              "                                                        <a  href=\"" +  productUrl + "\" data-toggle=\"tooltip\" title=\"商品详情\"><i class=\"fa fa-link\"></i></a>\n" +
                              "                                                    </div>\n" +
                              "                                                </div>\n" +
                              "                                            </div>\n" +
                              "                                            <span class=\"sticker-new\">sale</span>"

                          $("#commodityDiv").append(divShop);
                      }
                  },
                  dataType:"json"
              });
          }

          //用于获取最新上架、最高销量、最佳评分
          $("#sortUl li").click(function(){
              var sortid=$($(this).children("a")[0]).attr("value");
              getSort(sortid);
          })
          $(document).ready(function() {
              var msg = '[[${msg}]]'; // 使用Thymeleaf语法获取后端传递的消息
              if (msg !== '') {
                  alert(msg); // 如果有消息，则弹出提示框
              }
          });
      }
  </script>

<body>


    <!-- Wrapper Start -->
    <div class="wrapper kiosk-home">
        <!-- Header Area Start -->
        <header>
            <!-- Kiosk Header Top Start -->
            <div class="kiosk-header-top">
                <div class="container">
                    <div class="row">
                        <!-- Header Top left Start -->                        
                        <div class="col-lg-6 col-md-12 d-center">
                            <div class="kiosk-header-top-left">
                                <i class="fa fa-phone"></i>中软国际: 400-183-1066
                            </div>                        
                        </div>
                        <!-- Header Top Right Start -->                                       
                        <div class="col-lg-6 col-md-12">
                            <div class="kiosk-header-top-right">
                                <div class="search-box-view">
                                    <form action="#">
                                        <input type="text" class="email" placeholder="Search Your Product" name="product">
                                        <button type="submit" class="submit"></button>
                                    </form>
                                </div>
                                <!-- Header-list-menu End -->
                            </div>
                        </div>
                        <!-- Header Top Right End -->
                    </div>
                </div>
                <!-- Container End -->
            </div>
            <!-- Header Top End -->
            <!-- Kiosk Header Bottom Start -->

            <div th:include="top :: topFragment"></div>
            <!-- Header Bottom End -->
        </header>
        <!-- Header Area End -->
        <!-- Slider Area Start -->
        <div class="slider-area kiosk-slider">
            <div class="slider-wrapper theme-default">
                <!-- Slider Background  Image Start-->
                <div id="slider" class="nivoSlider">
                    <a href="shop.html"> <img src="/img/slider/4.jpg" data-thumb="img/slider/1.jpg" alt="" title="#slider-1-caption1"/></a>
                    <a href="shop.html"><img src="/img/slider/1.jpg" data-thumb="img/slider/4.jpg" alt="" title="#slider-1-caption2"/></a>
                </div>
                <!-- Slider Background  Image Start-->
                <div id="slider-1-caption1" class="nivo-html-caption nivo-caption">
                    <div class="text-content-wrapper">
                        <div class="container">
                            <div class="text-content">
                                <h4 class="title2 wow fadeInUp mb-16" data-wow-duration="2s" data-wow-delay="0s">折扣 30%</h4>
                                <h1 class="title1 wow fadeInUp mb-16" data-wow-duration="2s" data-wow-delay="1s">2024 新系列</h1>
                                <div class="banner-readmore wow fadeInUp mt-35" data-wow-duration="2s" data-wow-delay="2s">
                                    <a class="button slider-btn" href="/shop">立即购买</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>  
                <div id="slider-1-caption2" class="nivo-html-caption nivo-caption">
                    <div class="text-content-wrapper">
                        <div class="container">
                            <div class="text-content slide-2">
                                <h4 class="title2 wow fadeInUp mb-16" data-wow-duration="1s" data-wow-delay="1s">折扣 30%</h4>
                                <h1 class="title1 wow fadeInUp mb-16" data-wow-duration="1s" data-wow-delay="2s">2024 新系列</h1>
                                <div class="banner-readmore wow fadeInUp mt-35" data-wow-duration="1s" data-wow-delay="3s">
                                    <a class="button slider-btn" href="/shop">立即购买</a>
                                </div>
                            </div> 
                        </div>      
                    </div>
                </div>
            </div>
        </div>
        <!-- Slider Area End --> 
        <!-- Service Start -->
        <div class="kiosk-services ptb-70">
            <div class="container">
                <div class="row">
                    <!-- Single Service Start -->
                    <div class="col-lg-3 col-sm-6">
                        <div class="single-service">
                            <div class="service-content">
                                <i class="fa fa-bus"></i>
                                <h3>免费送货</h3>
                                <p> 非偏远地区邮费全免,优惠更多！</p>
                            </div>
                        </div>
                    </div>
                    <!-- Single Service End -->
                    <!-- Single Service Start -->
                    <div class="col-lg-3 col-sm-6">
                        <div class="single-service">
                            <div class="service-content">
                                <i class="fa fa-credit-card"></i>
                                <h3>退款</h3>
                                <p> 所有货物均享受七天无理由退换货服务,全场包邮</p>
                            </div>
                        </div>

                    </div>
                    <!-- Single Service End -->
                    <!-- Single Service Start -->
                    <div class="col-lg-3 col-sm-6">
                        <div class="single-service">
                            <div class="service-content">
                                <i class="fa fa-phone"></i>
                                <h3>在线客服</h3>
                                <p> 客服24小时在线，任何问题欢迎咨询</p>
                            </div>
                        </div>
                    </div>
                    <!-- Single Service End -->
                    <!-- Single Service Start -->
                    <div class="col-lg-3 col-sm-6">
                        <div class="single-service">
                              <div class="service-content">
                                <i class="fa fa-briefcase"></i>
                                <h3>活动优惠</h3>
                                <p> 不定期活动享受大牌优惠,买的多，优惠多！</p>
                            </div>
                        </div>
                    </div>
                    <!-- Single Service End -->
                </div>
            </div>
        </div>
        <!-- Service End --> 
        <!-- Product Area Start -->
        <div class="kiosk-top-product ptb-70">
            <div class="container">
                <!-- Best Product Activation Start -->
                <div class="kiosk-top-active owl-carousel home1-product">
                    <!-- Single Product Start -->
                    <div class="single-product">
                        <!-- Product Image Start -->
                        <div class="kiosk-product-img">
                            <a href="/shop">
                                <img class="first-img rounded-circle" src="/img/products/7.jpg" alt="single-product">
                                <img class="second-img rounded-circle" src="/img/products/8.jpg" alt="single-product">
                            </a>
                        </div>
                        <!-- Product Image End -->
                        <!-- Product Content Start -->
                        <div class="kiosk-product-content">
                            <div class="kiosk-product-action">
                                <div class="kiosk-action-content">
                                    <a href="/lookWishlist" data-toggle="tooltip" title="Add to Wishlist"><i class="fa fa-heart"></i></a>
                                    <a href="/lookCart" data-toggle="tooltip" title="Add to Cart"><i class="fa fa-shopping-cart"></i></a>
                                </div>
                            </div>
                        </div>
                        <!-- Product Content End -->
                    </div>                                        
                    <!-- Single Product End -->
                    <!-- Single Product Start -->
                    <div class="single-product">
                        <!-- Product Image Start -->
                        <div class="kiosk-product-img">
                            <a href="/shop">
                                <img class="first-img rounded-circle" src="/img/products/5.jpg" alt="single-product">
                                <img class="second-img rounded-circle" src="/img/products/6.jpg" alt="single-product">
                            </a>
                        </div>
                        <!-- Product Image End -->
                        <!-- Product Content Start -->
                        <div class="kiosk-product-content"> 
                            <div class="kiosk-product-action">
                                <div class="kiosk-action-content">
                                    <a href="/lookWishlist" data-toggle="tooltip" title="Add to Wishlist"><i class="fa fa-heart"></i></a>
                                    <a href="/lookCart" data-toggle="tooltip" title="Add to Cart"><i class="fa fa-shopping-cart"></i></a>
                                </div>
                            </div>
                        </div>
                        <!-- Product Content End -->
                    </div>                                        
                    <!-- Single Product End -->
                    <!-- Single Product Start -->
                    <div class="single-product">
                        <!-- Product Image Start -->
                        <div class="kiosk-product-img">
                            <a href="/shop">
                                <img class="first-img rounded-circle" src="/img/products/4.jpg" alt="single-product">
                                <img class="second-img rounded-circle" src="/img/products/3.jpg" alt="single-product">
                            </a>
                        </div>
                        <!-- Product Image End -->
                        <!-- Product Content Start -->
                        <div class="kiosk-product-content">  
                            <div class="kiosk-product-action">
                                <div class="kiosk-action-content">
                                    <a href="/lookWishlist" data-toggle="tooltip" title="Add to Wishlist"><i class="fa fa-heart"></i></a>
                                    <a href="/lookCart" data-toggle="tooltip" title="Add to Cart"><i class="fa fa-shopping-cart"></i></a>
                                </div>
                            </div>
                        </div>
                        <!-- Product Content End -->
                    </div>                                          
                    <!-- Single Product End -->
                    <!-- Single Product Start -->
                    <div class="single-product">
                        <!-- Product Image Start -->
                        <div class="kiosk-product-img">
                            <a href="/shop">
                                <img class="first-img rounded-circle" src="/img/products/1.jpg" alt="single-product">
                                <img class="second-img rounded-circle" src="/img/products/2.jpg" alt="single-product">
                            </a>
                        </div>
                        <!-- Product Image End -->
                        <!-- Product Content Start -->
                        <div class="kiosk-product-content">  
                            <div class="kiosk-product-action">
                                <div class="kiosk-action-content">
                                    <a href="/lookWishlist" data-toggle="tooltip" title="Add to Wishlist"><i class="fa fa-heart"></i></a>
                                    <a href="/lookCart" data-toggle="tooltip" title="Add to Cart"><i class="fa fa-shopping-cart"></i></a>
                                </div>
                            </div>
                        </div>
                        <!-- Product Content End -->
                    </div>                                         
                    <!-- Single Product End -->
                    <!-- Single Product Start -->
                    <div class="single-product">
                        <!-- Product Image Start -->
                        <div class="kiosk-product-img">
                            <a href="/shop">
                                <img class="first-img rounded-circle" src="/img/products/11.jpg" alt="single-product">
                                <img class="second-img rounded-circle" src="/img/products/12.jpg" alt="single-product">
                            </a>
                        </div>
                        <!-- Product Image End -->
                        <!-- Product Content Start -->
                        <div class="kiosk-product-content">
                            <div class="kiosk-product-action">
                                <div class="kiosk-action-content">
                                    <a href="/lookWishlist" data-toggle="tooltip" title="Add to Wishlist"><i class="fa fa-heart"></i></a>
                                    <a href="/lookCart" data-toggle="tooltip" title="Add to Cart"><i class="fa fa-shopping-cart"></i></a>
                                </div>
                            </div>
                        </div>
                        <!-- Product Content End -->
                    </div>                                          
                    <!-- Single Product End -->
                    <!-- Single Product Start -->
                    <div class="single-product">
                        <!-- Product Image Start -->
                        <div class="kiosk-product-img">
                            <a href="/shop">
                                <img class="first-img rounded-circle" src="/img/products/13.jpg" alt="single-product">
                                <img class="second-img rounded-circle" src="/img/products/14.jpg" alt="single-product">
                            </a>
                        </div>
                        <!-- Product Image End -->
                        <!-- Product Content Start -->
                        <div class="kiosk-product-content"> 
                            <div class="kiosk-product-action">
                                <div class="kiosk-action-content">
                                    <a href="/lookWishlist" data-toggle="tooltip" title="Add to Wishlist"><i class="fa fa-heart"></i></a>
                                    <a href="/lookCart" data-toggle="tooltip" title="Add to Cart"><i class="fa fa-shopping-cart"></i></a>
                                </div>
                            </div>
                        </div>
                        <!-- Product Content End -->
                    </div>                                         
                    <!-- Single Product End -->
                </div>
                <!-- Best Product Activation End -->
            </div>
            <!-- Container End -->
        </div>
        <!-- Product Area End --> 
        <!-- 特色产品开始 -->
        <div class="product-area ptb-70">
            <div class="container">
                <div class="row">
                    <div class="section-title col-lg-12">
                        <h2>特色产品 <i class="fa fa-shopping-cart"></i></h2>
                    </div>
                </div>
                <div class="row">

                        </div>
                    </div>

                    <div style="display: inherit;height: 400px;" id="specialShopDiv"></div>
                    <!-- 特色产品结束 -->

                </div>
            </div>
        </div> 
        <!-- Parallax Area End -->
        <div class="parallax-area pb-60">
            <div class="container-fluid">
               <div class="row">
                   <!-- Single Banner Start -->
                   <div class="col-md-6">
                        <div class="parallax-left parallax-bg" data-stellar-background-ratio="0.6">
                        </div>
                    </div>
                   <!-- Single Banner End -->
                    <!-- Single Banner Start -->
                   <div class="col-md-6">
                        <div class="parallax-right">
                            <div class="parallax-content">
                                <h3>无限优惠</h3>
                                <p> 疯狂优惠季来袭！全场商品低至七折！限时抢购，错过不再！快来我们的商城，选购您心仪的宝贝，享受超值优惠！</p>
                                <a class="button slider-btn" href="/shop">现在购买</a>
                            </div>
                        </div>
                    </div>
                   <!-- Single Banner End -->
               </div>
               <!-- Row End -->
            </div>
            <!-- Container End -->
        </div> 
        <!-- New Products Start -->
        <div class="new-products ptb-70">
            <div class="container">
                <div class="row">
                    <div class="section-title col-lg-12 mb-50">
                        <h2>精品推荐 <i class="fa fa-shopping-cart"></i></h2>
                    </div>
                </div>
                <div class="row">
                    <div class="col-xl-12 col-lg-12 ">
                        <!-- New Pro Content End -->
                        <div class="new-kiosk-product-content">

                            <div class="kiosk-tab-header tab-bg">
                                <!-- Featured Product List Item Start -->
                                <ul id="sortUl" class="nav product-list product-tab-list">
                                    <li><a class="active" data-toggle="tab" value='0' href="#new-arrival">最新上架</a></li>
                                    <li><a data-toggle="tab" value='1' href="#toprated">最佳销售</a></li>
                                    <li><a data-toggle="tab" value='2' href="#new-arrival">最高评分</a></li>
                                </ul>

                                <!-- Featured Product List Item End -->
                            </div>

                            <div class="tab-content product-tab-content jump mt-30">
                                <div id="new-arrival" class="tab-pane active">
                                    <!-- 最新上架开始 -->
                                    <div class="kiosk-collection owl-carousel">
                                        </div>
                                        <div style="display: inherit" id="commodityDiv"></div>
                                       </div>
                                    <!-- 最新上架结束 -->
                                </div>
                                  <!-- 最佳销售开始-->
                                <div id="toprated" class="tab-pane">
                                    <div class="kiosk-collection owl-carousel">

                                    </div>
                                    <!-- 最佳销售结束 -->
                                </div>
+
                        </div>
                            <!-- Tab-Content End -->
                        </div>
                        <!-- New Pro Content End -->                        
                    </div>
                </div>

            </div>
            <!-- Container End -->
        </div>
        <!-- New Products End -->  

            <!-- Container End -->
        </div>
        <!-- Blog Page End -->
        <!-- newsletter Start -->
        <div th:include="lop :: topFragment"></div>
        <!-- newsletter end -->
        <!-- Footer Start -->
<!--        -->
        <!-- Footer End -->
    </div>
    <!-- Wrapper End -->
    <!-- jquery 3.12.4 -->
    <script src="/js/vendor/jquery-1.12.4.min.js"></script>
    <!-- mobile menu js  -->
    <script src="/js/jquery.meanmenu.min.js"></script>
    <!-- scroll-up js -->
    <script src="/js/jquery.scrollUp.js"></script>
    <!-- owl-carousel js -->
    <script src="/js/owl.carousel.min.js"></script>
    <!-- slick js -->
    <script src="/js/slick.min.js"></script>
    <!-- wow js -->
    <script src="/js/wow.min.js"></script>
    <!-- price slider js -->
    <script src="/js/jquery-ui.min.js"></script>
    <script src="/js/jquery.countdown.min.js"></script>
    <!-- nivo slider js -->
    <script src="/js/jquery.nivo.slider.js"></script>
    <!-- fancybox js -->
    <script src="/js/jquery.fancybox.min.js"></script>
    <!-- bootstrap -->
    <script src="/js/bootstrap.min.js"></script>
    <!-- stellar -->
    <script src="/js/jquery.stellar.min.js"></script>
    <script src="/js/parallax.js"></script>
    <!-- popper -->
    <script src="/js/popper.js"></script>
    <!-- plugins -->
    <script src="/js/plugins.js"></script>
    <!-- main js -->
    <script src="/js/main.js"></script>

</body>

</html>
